<template>
  <div class="container">
    <div class="header">
      <div class="header-wrapper">
        <div class="header-left">
          <a href="" class="logo"></a>
        </div>
        <div class="header-right" @click="headerClick($event)">
          <div href="" class="right__item" id="index">首页</div>
          <div href="" class="right__item" id="login">登录</div>
        </div>
      </div>
    </div>
    <div class="main">
      <div class="index-main-wrapper">
        <el-carousel indicator-position="none" height="762px">
          <el-carousel-item v-for="item in 3" :key="item">
            <div
              class="carousel-item"
              :style="{
                background:
                  'url(./static/image/' +
                  item +
                  '.png) 50% center / cover no-repeat',
                height: '100%',
                width: '100%',
              }"
            ></div>
          </el-carousel-item>
        </el-carousel>
      </div>
      <div class="core-wrapper">
        <div class="content-core">
          <div
            class="content-core-item"
            @mouseover="coreOver('first')"
            @mouseout="coreOut()"
            @click="moveTo('first')"
          >
            <div
              class="item-img"
              :style="{
                'background-image':
                  isActive == 'first'
                    ? 'url(./static/image/first-active.png)'
                    : 'url(./static/image/first.png)',
              }"
            ></div>
            <div
              :class="[isActive == 'first' ? 'item-text-active' : 'item-text']"
            >
              加油卡/话费充值
            </div>
          </div>
          <div
            class="content-core-item"
            @mouseover="coreOver('second')"
            @mouseout="coreOut()"
            @click="moveTo('second')"
          >
            <div
              class="item-img"
              :style="{
                'background-image':
                  isActive == 'second'
                    ? 'url(./static/image/second-active.png)'
                    : 'url(./static/image/second.png)',
              }"
            ></div>
            <div
              :class="[isActive == 'second' ? 'item-text-active' : 'item-text']"
            >
              加油商城
            </div>
          </div>
          <div
            class="content-core-item"
            @mouseover="coreOver('third')"
            @mouseout="coreOut()"
            @click="moveTo('third')"
          >
            <div
              class="item-img"
              :style="{
                'background-image':
                  isActive == 'third'
                    ? 'url(./static/image/third-active.png)'
                    : 'url(./static/image/third.png)',
              }"
            ></div>
            <div
              :class="[isActive == 'third' ? 'item-text-active' : 'item-text']"
            >
              知识城邦
            </div>
          </div>
          <div
            class="content-core-item"
            @mouseover="coreOver('forth')"
            @mouseout="coreOut()"
            @click="moveTo('forth')"
          >
            <div
              class="item-img"
              :style="{
                'background-image':
                  isActive == 'forth'
                    ? 'url(./static/image/forth-active.png)'
                    : 'url(./static/image/forth.png)',
              }"
            ></div>
            <div
              :class="[isActive == 'forth' ? 'item-text-active' : 'item-text']"
            >
              票卷旅游
            </div>
          </div>
        </div>
      </div>
      <div ref="first" class="comm owner">
        <div ref="first-anchor" class="anchor"></div>
        <div class="section-seq">01</div>
        <div class="section-title">1000万+车主的选择</div>
        <ul class="owner-advantages">
          <li class="owner-advantages-item">
            <img src="/static/image/01/01-1-1.png" alt="" />
            <div class="owner-advantages-item__text">圈存即可使用</div>
          </li>
          <li class="owner-advantages-item">
            <img src="/static/image/01/01-1-2.png" alt="" />
            <div class="owner-advantages-item__text">安全又快捷</div>
          </li>
          <li class="owner-advantages-item">
            <img src="/static/image/01/01-1-3.png" alt="" />
            <div class="owner-advantages-item__text">优惠充值</div>
          </li>
          <li class="owner-advantages-item">
            <img src="/static/image/01/01-1-4.png" alt="" />
            <div class="owner-advantages-item__text">2小时快速到帐</div>
          </li>
          <li class="owner-advantages-item">
            <img src="/static/image/01/01-1-5.png" alt="" />
            <div class="owner-advantages-item__text">更多优惠套餐</div>
          </li>
        </ul>
        <div class="owner-content">
          <div class="owner-recharge">
            <h5 class="owner-recharge-title">
              <i class="j-icon-recharge"></i>选择充值业务
            </h5>
            <ul class="owner-business">
              <li
                :class="['pointer', ownerSelected == 1 ? 'is-active' : '']"
                @click="ownerSelect(1)"
              >
                <div
                  class="owner-business__card"
                  style="background-image: url('/static/image/01/01-2-3.png')"
                >
                  <p class="owner-business__card-title">中石油/中石化加油卡</p>
                  <p class="owner-business__card-subtitle">即充即时到账</p>
                  <p class="owner-business__card-bottom">·仅支持个人记名主卡</p>
                </div>
                <div class="owner-business__radio">
                  <i class="j-radio-icon"></i> 加油卡充值
                </div>
              </li>
              <li
                :class="['pointer', ownerSelected == 2 ? 'is-active' : '']"
                @click="ownerSelect(2)"
              >
                <div
                  class="owner-business__card"
                  style="background-image: url('/static/image/01/01-2-4.png')"
                >
                  <p class="owner-business__card-title">手机话费充值</p>
                  <p class="owner-business__card-subtitle">
                    即充即时到账，99折优惠
                  </p>
                  <p class="owner-business__card-bottom">
                    ·更多优惠下载加油宝App
                  </p>
                </div>
                <div class="owner-business__radio">
                  <i class="j-radio-icon"></i> 手机话费充值
                </div>
              </li>
            </ul>
            <el-button type="primary" size="default" class="j-button"
              >立即支付 <i class="icon-right-arrow"></i>
            </el-button>
          </div>
        </div>
      </div>
      <div ref="second" class="comm shop">
        <div ref="second-anchor" class="anchor"></div>
        <div class="section-seq">02</div>
      </div>
      <div ref="third" class="comm knowledge">
        <div ref="third-anchor" class="anchor"></div>
        <div class="section-seq">03</div>
      </div>
      <div ref="forth" class="comm play">
        <div ref="forth-anchor" class="anchor"></div>
        <div class="section-seq">04</div>
      </div>
    </div>
    <div style="display: none">
      <img src="/static/image/first.png" alt="" />
      <img src="/static/image/second.png" alt="" />
      <img src="/static/image/third.png" alt="" />
      <img src="/static/image/forth.png" alt="" />
      <img src="/static/image/first-active.png" alt="" />
      <img src="/static/image/second-active.png" alt="" />
      <img src="/static/image/third-active.png" alt="" />
      <img src="/static/image/forth-active.png" alt="" />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isActive: "first",
      ownerSelected: 1,
    };
  },
  mounted() {
    this.scrollActive();
  },
  methods: {
    ownerSelect(index) {
      this.ownerSelected = index;
    },
    headerClick(event) {
      let id = event.target.id;
      if (id === "index") {
        this.$router.push("/");
      } else if (id === "login") {
        this.$router.push("/login");
      }
    },
    coreOver(index) {
      this.changeCore(index);
    },
    coreOut() {
      this.changeCore("");
      this.calcActive();
    },
    changeCore(index) {
      this.isActive = index;
    },
    moveTo(index) {
      let dom = this.$refs[index + "-anchor"];
      if (Array.isArray(dom)) {
        dom = dom[0];
      }
      dom.scrollIntoView({
        block: "start",
        behavior: "smooth",
      });
    },
    scrollActive() {
      let that = this;
      window.onscroll = function () {
        that.calcActive();
      };
    },

    calcActive() {
      let that = this;
      let first = that.$refs.first;
      let second = that.$refs.second;
      let third = that.$refs.third;
      let forth = that.$refs.forth;

      let firstTop = first.offsetTop;
      let secondTop = second.offsetTop;
      let thirdTop = third.offsetTop;
      let forthTop = forth.offsetTop;

      let firstHight =
        parseInt(window.getComputedStyle(first).height) +
        parseInt(window.getComputedStyle(first).paddingTop) +
        parseInt(window.getComputedStyle(first).paddingBottom);
      let secondHight =
        parseInt(window.getComputedStyle(second).height) +
        parseInt(window.getComputedStyle(second).paddingTop) +
        parseInt(window.getComputedStyle(second).paddingBottom);
      let thirdHight =
        parseInt(window.getComputedStyle(third).height) +
        parseInt(window.getComputedStyle(third).paddingTop) +
        parseInt(window.getComputedStyle(third).paddingBottom);
      let forthHight =
        parseInt(window.getComputedStyle(forth).height) +
        parseInt(window.getComputedStyle(forth).paddingTop) +
        parseInt(window.getComputedStyle(forth).paddingBottom);

      let scrollValue = parseInt(document.documentElement.scrollTop);

      if (scrollValue < firstTop) {
        that.isActive = "first";
      } else if (
        firstTop - firstHight / 4 <= scrollValue &&
        scrollValue + secondHight / 4 < secondTop
      ) {
        that.isActive = "first";
      } else if (
        secondTop - secondHight / 4 <= scrollValue &&
        scrollValue + thirdHight / 4 < thirdTop
      ) {
        that.isActive = "second";
      } else if (
        thirdTop - thirdHight / 4 <= scrollValue &&
        scrollValue + forthHight / 4 < forthTop
      ) {
        that.isActive = "third";
      } else if (forthTop - forthHight / 4 <= scrollValue) {
        that.isActive = "forth";
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  min-width: 1200px;
  height: 100%;
  display: flex;
  flex-direction: column;
  .header {
    position: absolute;
    top: 0;
    left: 0;
    background-color: #fff;
    width: 100%;
    font-size: 16px;
    font-family: "MicrosoftYaHei-Bold", "MicrosoftYaHei";
    z-index: 2;
    box-shadow: 0 5px 13px 0 hsla(0, 0%, 64%, 0.11);
    .header-wrapper {
      width: 1200px;
      margin: 0 auto;
      display: flex;
      flex-direction: center;
      justify-content: space-between;
      align-items: center;
      flex-wrap: nowrap;
      .header-left {
        width: 600px;
        height: 100%;
        line-height: 100px;
        text-align: left;
        .logo {
          display: inline-block;
          width: 123px;
          height: 43px;
          vertical-align: middle;
          background: url("/static/image/logo.png") no-repeat;
        }
      }
      .header-right {
        padding-left: 60px;
        width: 600px;
        height: inherit;
        display: flex;
        flex-direction: center;
        justify-content: flex-end;
        align-items: center;
        flex-wrap: nowrap;
        .right__item {
          color: rgb(255, 110, 52);
          font-size: 16px !important;
          margin-right: 60px;
          padding: 0;
          display: inline-flex;
          flex-direction: row;
          align-items: center;
          justify-content: center;
          vertical-align: middle;
          position: relative;
          text-decoration: none;
          outline: 0;
          cursor: pointer;
          padding: 0;
          font-size: 14px;
          font-weight: 500;
          &:hover {
            color: #ff9303;
          }
        }
      }
    }
  }
  .main {
    .index-main-wrapper {
      position: relative;
      width: 100%;
      height: 760px;
      z-index: 1;
      .carousel-item {
      }
    }
    .core-wrapper {
      width: 100%;
      height: 120px;
      position: sticky;
      top: 0;
      left: 0;
      padding: 15px 0 0 0;
      box-sizing: content-box;
      background: #fff;
      z-index: 100;
      transition: padding 0.2s;
      box-shadow: 0 3px 20px 0 rgba(0, 0, 0, 0.2);
      .content-core {
        display: flex;
        box-sizing: border-box;
        width: 100%;
        height: 100%;
        padding: 0 110px;
        .content-core-item {
          flex: 1;
          display: flex;
          flex-direction: column;
          align-items: center;
          height: 100%;
          cursor: pointer;
          .item-img {
            background-repeat: no-repeat;
            background-position: center;
            box-sizing: border-box;
            width: 100%;
            height: 60%;
            text-align: center;
          }
          .item-text {
            height: 40%;
            line-height: 36px;
            font-size: 20px;
          }
          .item-text-active {
            height: 40%;
            line-height: 36px;
            font-size: 20px;
            color: #ff6e34;
          }
        }
      }
    }
    .comm {
      position: relative;
      width: 100%;
      padding-top: 135px;
      text-align: center;
      color: #fff;
      font-size: 25px;
      .anchor {
        position: absolute;
        left: 0;
        top: -135px;
      }
    }
    .owner {
      height: auto;
      background-color: #fff;
      .section-seq {
        font-size: 42px;
        font-family: RobotoMono-Bold, RobotoMono;
        font-weight: 700;
        color: #000;
        line-height: 55px;
        letter-spacing: 1px;
        position: relative;
        text-align: center;
        &::after {
          content: "SERVICES";
          width: 343px;
          height: 32px;
          font-size: 24px;
          font-family: RobotoMono-Medium, RobotoMono;
          font-weight: 500;
          color: rgba(244, 147, 60, 0.15);
          line-height: 32px;
          letter-spacing: 5px;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate3d(-50%, -50%, 0);
          z-index: 0;
        }
      }
      .section-title {
        height: 56px;
        font-size: 48px;
        font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
        font-weight: 700;
        color: #000;
        line-height: 56px;
        text-align: center;
        margin-bottom: 55px;
      }
      .owner-advantages {
        width: 100%;
        margin-bottom: 51px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        flex-wrap: nowrap;
        .owner-advantages-item {
          width: 230px;
          height: 100px;
          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: center;
          flex-wrap: nowrap;
          &:hover {
            box-shadow: -1px 6px 34px 8px rgba(60, 78, 105, 0.05);
          }
          .owner-advantages-item__text {
            margin-left: 30px;
            font-size: 16px;
            color: rgb(33, 37, 41);
          }
        }
      }
      .owner-content {
        padding: 30px 0;
        background: url("/static/image/01/01-2-1.png") center center / 2560px
            489px no-repeat,
          linear-gradient(
            to right,
            rgb(255, 102, 0) 0%,
            rgb(255, 102, 0) 50%,
            rgb(255, 182, 0) 51%,
            rgb(255, 182, 0) 100%
          );
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        flex-wrap: nowrap;
        .owner-recharge {
          text-align: center;
          background: #fff;
          box-shadow: 0 4px 39px 0 rgba(254, 95, 25, 0.3);
          padding: 37px 43px;
          transform: translate3d(30%, 0, 0);
          .owner-recharge-title {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            flex-wrap: nowrap;
            justify-content: flex-start;
            height: 26px;
            font-size: 20px;
            font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
            font-weight: 700;
            color: #000;
            line-height: 26px;
            .j-icon-recharge {
              width: 22px;
              height: 22px;
              display: inline-block;
              margin-right: 15px;
              background-image: url("/static/image/01/01-2-2.png");
            }
          }
          .owner-business {
            display: flex;
            flex-direction: row;
            align-items: center;
            flex-wrap: nowrap;
            justify-content: center;
            width: 100%;
            justify-content: space-between;
            margin: 23px 0 44px;
            background: no-repeat 50%/100% 100%;
            > li {
              justify-content: center;
              width: 330px;
              height: 200px;
              flex-direction: column;
              box-sizing: border-box;
              padding: 15px 35px;
              cursor: pointer;
              border: 2px solid transparent;
              .owner-business__card {
                background: no-repeat 50%/100% 100%;
                display: flex;
                flex-direction: row;
                justify-content: center;
                align-items: center;
                flex-wrap: nowrap;
                padding: 22px 0 19px 17px;
                justify-content: space-between;
                flex-direction: column;
                align-items: flex-start;
                font-size: 12px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #fff;
                line-height: 18px;
                .owner-business__card-title {
                  font-size: 20px;
                  font-weight: 600;
                  line-height: 24px;
                }
                .owner-business__card-title {
                  margin-top: 5px;
                }
                .owner-business__card-bottom {
                  color: #ffe29c;
                  margin-top: 30px;
                }
              }
              .owner-business__radio {
                color: #000;
                font-size: 16px;
                margin-top: 12px;
                .j-radio-icon {
                  width: 16px;
                  height: 16px;
                  margin-right: 6px;
                  display: inline-block;
                  background: url("/static/image/01/01-2-7.png") no-repeat 50%/100%
                    100%;
                }
              }
            }
            > li.is-active {
              border-radius: 4px;
              border: 2px solid #f4933c;
              .j-radio-icon {
                background-image: url("/static/image/01/01-2-6.png");
              }
            }
          }
          .j-button {
            width: 336px;
            height: 62px;
            font-size: 16px;
            border-color: transparent;
            background: linear-gradient(90deg, #ff9303, #fe5f19);
            -webkit-box-shadow: 0 7px 17px 0 rgba(255, 110, 52, 0.3);
            box-shadow: 0 7px 17px 0 rgba(255, 110, 52, 0.3);
            outline: none;
            font-size: 16px;
            span > i.icon-right-arrow {
              display: inline-block;
              width: 28px;
              height: 12px;
              background: url("/static/image/01/01-2-5.png") no-repeat 50%/100%;
              margin-left: 6px;
            }
          }
        }
      }
    }
    .shop {
      height: 860px;
      background-color: blue;
    }
    .knowledge {
      height: 860px;
      background-color: pink;
    }
    .play {
      height: 860px;
      background-color: rgb(31, 31, 9);
    }
  }
}
</style>